<template>
	<view>
		<view class="head"></view>
		<view class="invation"></view>
		<view class="main">
			<view class="dingweifubenwen">
				<view class="" v-html="list_url.article_content">
				</view>
 			</view>
			<view class="profit">
				<text class="profitFont">任务收益提成</text>
			</view>
			<view class="commissionBox">
				<text class="commissionFont">本月获得提成</text>
				<text class="commossionmoney">{{list_url.month_commission}}元</text>
			</view>
			<view class="invationNumber">
				<text class="commissionFont">累计邀请</text>
				<text class="commossionmoney">{{list_url.lower_amount}}人</text>
			</view>
			<image class="zhuyi" src="../../../static/user2/zhuyi.png"></image>
			<view class="content1" v-html="list_url.article_content_2">
			
			</view>
		</view>
		<view class="footer">
			<view class="shareMethods" @click="paste(list_url.inviter_url)">
				<image class="shareImg" src="/static/user2/url.png"></image>
				<text class="shareFont">复制链接</text>
			</view>
			<!-- <view class="shareMethods">
				<image class="shareImg" src="../../../static/user2/friend.png"></image>
				<text class="shareFont">朋友圈</text>
			</view>
			<view class="shareMethods">
				<image class="shareImg" src="../../../static/user2/wxinvation.png"></image>
				<text class="shareFont">微信</text>
			</view> -->
			<view  class="shareMethods" @click="goshaer">
				<image class="shareImg" src="../../../static/user2/invationCode.png"></image>
				<text class="shareFont">二维码</text>
			</view>
		</view>
	</view>
</template>

<script>
	import Require from '@/common/require.js';
	export default {
		data() {
			return {
				commissionMoney:'368',
				invationNum:'23',
				photo: '/static/user/photo.png',
				spread_url:'www.baidu.com',
				list_url:''
			};
			
		},
		onShow() {
			var self=this
			self.get_url()
		},
		methods:{
			goshaer(){
				var self=this
				uni.navigateTo({
					url:"./shareCode?id="+self.list_url.inviter_num
				})
			},
			get_url(){
				var self=this
				Require.commonRequest({
					url: '/api/invite/paper',
					success: function(ret) {
						if(ret.data.code==200){
							console.log(ret.data.data)
							self.list_url=ret.data.data
							
						}else{
							uni.showToast({
								icon: 'none',
								title: ret.data.msg,
							});
						}
					},
					fail: function() {
						uni.showToast({
							icon: "none",
							title: "网络异常，请稍后再试"
						})
					}
				})
			},
			onNavigationBarButtonTap(e) {
				var self=this
				Require.commonRequest({
					url: '/api/member/myinviter',
					success: function(ret) {
						if(ret.data.code==200){
							console.log(ret)
							if(ret.data.data.state==1){
								uni.navigateTo({
									url:"./invitedBy"
								})
							}else{
								uni.navigateTo({
									url:"invitationCode"
								})
							}
						}else{
							uni.showToast({
								icon: 'none',
								title: ret.data.msg,
							});
						}
					},
					fail: function() {
						uni.showToast({
							icon: "none",
							title: "网络异常，请稍后再试"
						})
					}
				})
			    	// uni.navigateTo({
			    	// 	url:"invitationCode"
			    	// })
			},
			
		paste(val) {
			uni.setClipboardData({
					data:val,
					success() {
						console.log(val)
						uni.showToast({
							title: '复制成功',
							duration:2000,
							icon:"none"
						})
					}	
				})
			
				},

		},
	}
</script>

<style lang="scss">
	page{
		background-color: #7322D8;
	}
   .head{
	   width: 750rpx;
	   height: 540rpx;
	   background: url(../../../static/user2/banner.png) no-repeat;
	   background-size: cover;
   }
   .invation{
	   width: 663rpx;
	   height: 143rpx;
	   background: url(../../../static/user2/invati.png) no-repeat;
	   background-size: cover;
	   position: relative;
	   left: 44rpx;
   }
   .main{
	   width: 680rpx;
	   height: 1720rpx;
	   background: url(../../../static/user2/bginvation.png) no-repeat;
	   background-size: 680rpx 1720rpx;
	   position: relative;
	   left: 35rpx;
	   .dingweifubenwen{
		   width: 600rpx;
		   height: 620rpx;
		   top: 120rpx;
		   left: 6%;
		   position: absolute;
		   color: white;
		   padding: 20rpx;
		   box-sizing: border-box;
		   font-size: 32rpx;
	   }
   }
   .profit{
	   width: 412rpx;
	   height: 43rpx;
	   background: url(../../../static/user2/renwu.png) no-repeat;
	   background-size: cover;
	   display: flex;
	   justify-content: center;
	   position: absolute;
	   top: 810rpx;
	   left: 134rpx;
   }
   .profitFont{
	   font-size:30rpx;
	   font-family:PingFang SC;
	   font-weight:bold;
	   color:rgba(255,255,255,1);
	   position: relative;
	   top: -12rpx;
   }
   .commissionBox{
	   width:280rpx;
	   height:130rpx;
	   background:rgba(136,66,224,1);
	   border:2rpx solid rgba(160,103,232,1);
	   border-radius:10rpx;
	   position: absolute;
	   top: 891rpx;
	   left: 50rpx;
	   display: flex;
	   justify-content: center;
   }
   .invationNumber{
	   width:280rpx;
	   height:130rpx;
	   background:rgba(136,66,224,1);
	   border:2rpx solid rgba(160,103,232,1);
	   border-radius:10rpx;
	   position: absolute;
	   top: 891rpx;
	   right: 50rpx;
	   display: flex;
	   justify-content: center;
   }
   .commissionFont{
	   font-size:30rpx;
	   font-family:PingFang SC;
	   font-weight:bold;
	   color:rgba(255,255,255,1);
	   position: absolute;
	   top: 20rpx;
   }
   .commossionmoney{
	   font-size:30rpx;
	   font-family:PingFang SC;
	   font-weight:bold;
	   color:rgba(255,255,255,1);
	   position: absolute;
	   bottom: 29rpx;
   }
   .zhuyi{
	   width: 380rpx;
	   height: 45rpx;
	   position: absolute;
	   left: 148rpx;
	   top: 1081rpx;
   }
   .content1{
	   width:578rpx;
	   height:93rpx;
	   font-size:26rpx;
	   font-family:PingFang SC;
	   font-weight:400;
	   color:rgba(239,239,244,1);
	   position: absolute;	
	   left: 50rpx;
	   bottom: 470rpx;
   }
   .content2{
	   width:550rpx;
	   height:60rpx;
	   font-size:26rpx;
	   font-family:PingFang SC;
	   font-weight:400;
	   color:rgba(239,239,244,1);
	   position: absolute;
	   left: 78rpx;
	   bottom: 381rpx;
   }
   .content3{
	   width:550rpx;
	   height:161rpx;
	   font-size:26rpx;
	   font-family:PingFang SC;
	   font-weight:400;
	   color:rgba(239,239,244,1);
	   position: absolute;
	   left: 78rpx;
	   bottom: 191rpx;
   }
   .content4{
	   width:550rpx;
	   height:59rpx;
	   font-size:26rpx;
	   font-family:PingFang SC;
	   font-weight:400;
	   color:rgba(239,239,244,1);
	   position: absolute;
	   left: 78rpx;
	   bottom: 110rpx;
   }
   .content5{
	   width:500rpx;
	   height:25rpx;
	   font-size:26rpx;
	   font-family:PingFang SC;
	   font-weight:400;
	   color:rgba(239,239,244,1);
	   position: absolute;
	   left: 78rpx;
	   bottom: 50rpx;
   }
   .footer{
	   width: 600rpx;
	   height: 148rpx;
	  display: flex;
	  padding: 0 80rpx;
	  box-sizing: border-box;
	  position: relative;
	  justify-content: space-between;
	  left: 80rpx;
	   }
	   .shareMethods{
		   width: 150rpx;
		   height: 148rpx;
		   display: flex;
		   justify-content: center;
		   }
		   .shareImg:nth-child(1){
			 width: 50rpx;
			 height: 52rpx;
			 position: absolute;
			 top: 18rpx;
		   }
		   .shareImg:nth-child(2){
		   			 width: 58rpx;
		   			 height: 48rpx;
					 position: absolute;
					 top: 18rpx;
		   }
		   .shareImg:nth-child(3){
		   			 width: 42rpx;
		   			 height: 48rpx;
					 position: absolute;
					 top: 18rpx;
		   }
		   .shareImg:nth-child(4){
		   			 width: 46rpx;
		   			 height: 44rpx;
					 position: absolute;
					 top: 18rpx;
		   }
		   .shareFont{
			   font-size:26rpx;
			   font-family:PingFang SC;
			   font-weight:400;
			   color:rgba(255,255,255,1);
			   position: absolute;
			   bottom: 33rpx;
		   }
</style>
